<style>

    .ly-source-view {
        bottom: 0;
        right: 10px;
        position: fixed;
        width: 30px;
        height: auto;
        padding: 10px;
        line-height: 18px;
        margin: 10px 0 10px;
        font-size: 14px;
        word-wrap: break-word;
        color: #fff;
        background-color: var(--primary);
        box-shadow: 0 2px 4px 0 rgba(47, 80, 133, 0.2);
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        z-index: 1100;
    }

    .ly-source-view-code .el-dialog__title {
        font-size: 21px;
    }

    .ly-source-view-code .el-dialog__body {
        padding: 0 20px;
    }
    .ly-source-view-code .el-dialog__body>div {
        margin-top: 0!important;
    }

    .ly-source-view-code .ly-code-pre pre {
        height: 400px;
        overflow-y: scroll;
    }
</style>
<template>
    <div>
        <div class="ly-source-view" @click="showCode">
            查看源码
        </div>
        <el-dialog
                custom-class="ly-source-view-code"
                title="页面源码"
                append-to-body
                :visible.sync="show"
                fullscreen
        >
            <ly-code-view :height="height" v-model="code" theme="note" hide-close></ly-code-view>
        </el-dialog>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-source-view',
            data: function () {
                return {
                    show: false,
                    code: '',
                    height: 500
                }
            }, methods: {
                showCode: function () {
                    var me = this;
                    me.show = true;
                    axios.get(location.pathname + '.html').then(function (rs) {
                        me.code = rs.data;
                        me.height = window.innerHeight-120;
                    });
                }
            }
        }
    });
</script>
